<template>
  <div class="content">
    <div class="nameDiv">
      <el-input v-model="content.name" placeholder="Please input"
                style="font-size: large;height: 38px;"
                :readonly="!isEdit.name"
                @dblclick="editName"
                @blur="saveName"
                :class="{'name':!isEdit.name}"
                @keyup.esc="saveName"
                class="shadow"
                maxlength="200"/>
    </div>

    <div style="margin-top: 20px"></div>
    <div class="textarea">
      <el-input
          v-model="content.value"
          maxlength="10000"
          placeholder="Please input"
          show-word-limit
          type="textarea"
          size="large"
          style="font-size: large"
          :readonly="!isEdit.value"
          @dblclick="editValue"
          @blur="saveValue"
          @keyup.esc="saveValue"
          class="shadow"
          :class="{'password':!isEdit.value}"
      />
    </div>
  </div>
</template>

<script>
import {computed, ref, watch} from "vue";
import {useStore} from "vuex";
import $bus from '@/utils/eventBus'

export default {
  name: `Content`,
  setup(){
    const store=useStore();
    const currentContent=computed(()=>store.getters.currentContent);
    const content=ref({
      name:currentContent.value.name,
      value:currentContent.value.value
    });
    watch(currentContent,()=>{
      content.value.name=currentContent.value.name;
      content.value.value=currentContent.value.value;
    })

    const isEdit=ref({
      name:false,
      value:false
    })
    const editName=(event)=>{
      if(isEdit.value.name)
        return;
      $bus.emit('focusDirectory');
      isEdit.value.name=true;
      const dom=event.currentTarget;
      if(dom.setSelectionRange){
        const len=content.value.name.length;
        dom.setSelectionRange(len,len);
      }
    }
    const saveName=()=>{
      if(!isEdit.value.name)
        return;
      isEdit.value.name=false;
      store.commit('modifyContent',{
        ...content.value,
        id:currentContent.value.id,
        createTime:currentContent.value.createTime
      });
    }
    const editValue=(event)=>{
      if(isEdit.value.value)
        return
      $bus.emit('focusDirectory');
      isEdit.value.value=true;
      const dom=event.currentTarget;
      if(dom.setSelectionRange){
        const len=content.value.value.length;
        dom.setSelectionRange(len,len);
      }
    }
    const saveValue=()=>{
      if(!isEdit.value.value)
        return;
      //toSave
      isEdit.value.value=false;
      store.commit('modifyContent',{
        ...content.value,
        id:currentContent.value.id,
        createTime:currentContent.value.createTime
      });
    }
    return{
      content,
      isEdit,
      editName,
      saveName,
      editValue,
      saveValue
    }
  }
}
</script>

<style scoped lang="less">
.content{
  height: 100%;
}
.nameDiv{
  position: relative;
}
.textarea{
  height: calc(100% - 70px);
  position: relative;
}
:deep(.el-textarea),:deep(.el-textarea__inner){
  height: 100% !important;
}
:deep(.password){
  .el-textarea__inner{
    cursor: pointer !important;
    background-color: rgba(255, 255, 255,0.3) !important;
  }
}
:deep(.name){
  .el-input__wrapper{
    cursor: pointer !important;
    background-color: rgba(255, 255, 255,0.3) !important;
    .el-input__inner{
      cursor:pointer !important;
    }
  }
}
.shadow{
  border-radius: 15px;
  box-shadow: 0 5px 10px 0 rgb(0 0 0 / 25%);
}
</style>
